<template>
	<view class="h-full">
		<scroll-view
			scroll-y
			class="list scrollbar-none"
			@scrolltolower="scrolltolower"
		>
			<view
				class="item"
				v-for="i in list"
				:key="i.id"
				@click="gotoDetail(i)"
				v-if="list.length > 0"
			>
				<view class="item-top">
					<view class="item-line">
						<view
							class="item-tag"
							:style="{
								'background-color':
									i.reverseType === 'OUT' ? '#8a72f1' : '#ff4d1a',
							}"
							>{{ i.reverseType === "OUT" ? "社会" : "内部" }}</view
						>
						<text class="greyColor label">申请时间：</text>
						<text class="text">{{ i.applyTime }}</text>
					</view>
					<text
						:style="{
							color: getStatusColor(
								getLabel(AppointmentStatusEnum, i.reversionStatus),
							),
						}"
						>{{
							getLabel(AppointmentStatusEnum, i.reversionStatus).slice(
								getLabel(AppointmentStatusEnum, i.reversionStatus).lastIndexOf(
									"-",
								) + 1,
							)
						}}</text
					>
				</view>
				<view class="item-content">
					<van-tag
						type="success"
						style="margin-right: 5rpx"
						v-show="i.needAccompany === 'Y'"
					>
						领导陪同
					</van-tag>
					<van-tag
						type="primary"
						style="margin-right: 5rpx"
						v-show="i.needHotel === 'Y'"
					>
						需要酒店
					</van-tag>
					<van-tag
						type="danger"
						style="margin-right: 5rpx"
						v-show="i.needCar === 'Y'"
					>
						需要派车
					</van-tag>
					<van-tag
						type="warning"
						style="margin-right: 5rpx"
						v-show="i.needEat === 'Y'"
					>
						预约餐饮
					</van-tag>
					<view class="item-line">
						<text class="greyColor label">客户单位名称：</text>
						<text class="text">{{ i.companyName }}</text>
					</view>
					<view class="item-line">
						<text class="greyColor label">参观时间：</text>
						<text class="text">{{
							formatVisitTime(i.visitDate, i.visitTime)
						}}</text>
					</view>
					<view class="item-line">
						<text class="greyColor label">参观人数：</text>
						<text class="text"
							>{{ i.visitNum || i.outConnectJson?.length }}人</text
						>
					</view>
				</view>
				<view class="item-button">
					<van-button
						type="primary"
						size="small"
						@click.stop="remoke(i)"
						v-if="i.buttonList.indexOf('REVOKE') >= 0"
						class="button"
					>
						取消预约
					</van-button>
					<van-button
						type="primary"
						size="small"
						@click.stop="reappointment(i)"
						v-if="i.buttonList.indexOf('RE_RESERVATION') >= 0"
						class="button"
					>
						重新预约
					</van-button>
					<van-button
						type="danger"
						size="small"
						v-if="i.buttonList.indexOf('REFUSE') >= 0"
						@click.stop="refuse(i)"
						class="button"
					>
						驳回
					</van-button>
					<van-button
						type="success"
						size="small"
						v-if="i.buttonList.indexOf('PASS') >= 0"
						@click.stop="pass(i)"
						class="button"
					>
						通过
					</van-button>
					<van-button
						type="danger"
						size="small"
						v-if="i.buttonList.indexOf('JIANGJIEYUAN_REFUSE') >= 0"
						@click.stop="guideRefuse(i)"
						class="button"
					>
						拒绝
					</van-button>
					<van-button
						type="success"
						size="small"
						v-if="i.buttonList.indexOf('JIANGJIEYUAN_PASS') >= 0"
						@click.stop="guidePass(i)"
						class="button"
					>
						接受
					</van-button>
					<van-button
						type="primary"
						size="small"
						v-if="i.buttonList.indexOf('INFORMATION_FILL') >= 0"
						class="button"
						@click.stop="fillOut(i)"
					>
						信息填写
					</van-button>
					<van-button
						type="primary"
						size="small"
						@click.stop="appraise(i)"
						v-if="i.buttonList.indexOf('JUDGE') >= 0"
					>
						去评价
					</van-button>
					<van-button
						type="primary"
						size="small"
						@click.stop="tourIsComplete(i)"
						v-if="i.buttonList.indexOf('VISIT_COMPLETE') >= 0"
					>
						参观完成
					</van-button>
				</view>
			</view>
			<van-empty description="暂无数据" v-else />
		</scroll-view>
	</view>
</template>
<script setup>
import { getReservationPageApi, completeOutApi } from "@/api";
import { getLabel, getStatusColor, formatVisitTime } from "@/utils";
const useDict = useDictStore();
// 获取状态枚举
const AppointmentStatusEnum = useDict.getData("RESERVATION_STATUS");

const prop = defineProps({
	// 查询状态
	tabValue: {
		type: String || Number,
		default: "",
	},
	// 页面来源
	location: {
		type: String,
		default: "",
	},
});
const emit = defineEmits([
	"remoke",
	"refuse",
	"pass",
	"guidePass",
	"guideRefuse",
	"getTotal",
]);
// 列表数据
const list = ref([]);
// 分页
const current = ref(1);
const size = ref(10);
const total = ref(0);

// 详情
const gotoDetail = (data) => {
	// 社会
	if (data.reverseType === "OUT") {
		uni.navigateTo({
			url:
				"/packages/booking/detail/appointmentDetails/index?id=" +
				data.id +
				"&buttonList=" +
				data.buttonList,
		});
		return;
	}
	// 内部
	if (
		data.buttonList.indexOf("REFUSE") >= 0 ||
		data.buttonList.indexOf("PASS") >= 0
	) {
		// 审批
		uni.navigateTo({
			url:
				"/pages/booking/accountManagerBooking/reappointment?id=" +
				data.id +
				"&type=approval" +
				"&buttonList=" +
				data.buttonList,
		});
	} else {
		// 详情
		uni.navigateTo({
			url:
				"/packages/booking/detail/accountManagerDetails/index?id=" +
				data.id +
				"&buttonList=" +
				data.buttonList,
		});
	}
};

// 重新预约
const reappointment = (data) => {
	uni.navigateTo({
		url:
			"/pages/booking/accountManagerBooking/reappointment?id=" +
			data.id +
			"&type=reappointment",
	});
};

// 客户情况填写
const fillOut = (data) => {
	if (data.reverseType === "OUT") {
		uni.navigateTo({
			url:
				"/packages/booking/detail/appointmentDetails/index?id=" +
				data.id +
				"&type=fillOut" +
				"&buttonList=" +
				data.buttonList,
		});
	} else {
		uni.navigateTo({
			url:
				"/packages/booking/detail/accountManagerDetails/index?id=" +
				data.id +
				"&type=fillOut" +
				"&buttonList=" +
				data.buttonList,
		});
	}
};
const tourIsComplete = async (data) => {
	await completeOutApi({ id: data.id });
	feedback.toast("操作成功");
	loadData(1);
	// 部分页面需要获取总条数
	emit("getTotal");
};
// 取消预约
const remoke = (data) => {
	emit("remoke", data);
};
// 通过
const pass = (data) => {
	emit("pass", data);
};
// 驳回
const refuse = (data) => {
	emit("refuse", data);
};
// 讲解员 通过
const guidePass = (data) => {
	emit("guidePass", data);
};
// 讲解员 驳回
const guideRefuse = (data) => {
	emit("guideRefuse", data);
};

// 评价
const appraise = (data) => {
	uni.navigateTo({
		url: "/packages/appraise/index?id=" + data.id,
	});
};

// 下拉
const scrolltolower = async () => {
	if (current.value >= total.value / size.value) {
	} else {
		current.value++;
		await loadData();
	}
};

// 获取数据
const loadData = async (type) => {
	if (!prop.tabValue || !prop.location) {
		return;
	}
	uni.showLoading();
	if (type) {
		current.value = 1;
	}

	const { data } = await getReservationPageApi({
		current: current.value,
		size: size.value,
		statusFlag_ignore: prop.tabValue,
		location_ignore: prop.location,
	});
	if (!type) {
		list.value = list.value.concat(data.records);
	} else {
		list.value = data.records;
	}
	total.value = data.total;
	uni.hideLoading();
};

onShow(() => {
	loadData(1);
});
// 调用这个函数将子组件的一些数据和方法暴露出去
defineExpose({
	loadData,
});
</script>
<style lang="scss" scoped>
@import "../../index.scss";
</style>
